<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #nav h3{
            width: 200px;
            line-height: 40px;
            padding: 0 20px;
            border: 1px solid #999;
            background-color: #abcdef;
            cursor: pointer;
        }
        #nav ul{
            width: 242px;
            display: none;
        }
        #nav ul li{
            width: 200px;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            border: 1px solid #999;
            background-color: #f5f5f5;
            cursor: pointer;
        }
    </style>
    <script src="../../jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>JQ 纵向导航条展开效果</h1>
    <hr>

    <div id="nav">
        <h3>用户管理</h3>
        <ul>
            <li><a>用户列表</a></li>
            <li><a>添加用户</a></li>
            <li><a>修改用户</a></li>
            <li><a>用户黑名单</a></li>
        </ul>
        <h3>商品管理</h3>
        <ul>
            <li><a>商品列表</a></li>
            <li><a>添加商品</a></li>
            <li><a>修改商品</a></li>
            <li><a>商品黑名单</a></li>
        </ul>
        <h3>分类管理</h3>
        <ul>
            <li><a>分类列表</a></li>
            <li><a>添加分类</a></li>
            <li><a>修改分类</a></li>
            <li><a>分类黑名单</a></li>
        </ul>
        <h3>订单管理</h3>
        <ul>
            <li><a>订单列表</a></li>
            <li><a>添加订单</a></li>
            <li><a>修改订单</a></li>
            <li><a>订单黑名单</a></li>
        </ul>
        <h3>系统管理</h3>
        <ul>
            <li><a>系统列表</a></li>
            <li><a>添加系统</a></li>
            <li><a>修改系统</a></li>
            <li><a>系统黑名单</a></li>
        </ul>
    </div>


    <script>
        // 展开效果
        $(function(){
            // 给h3绑定事件
            $('#nav h3').click(function(){
                // 找到点击元素的下一个同辈元素,并显示
                // $(this).next('ul').css('display', 'block');
                // $(this).next('ul').show();

                //  判断是否展开/收起
                // if ($(this).next('ul').is(':hidden')) {
                //     // $(this).next('ul').show(1000);
                //     $(this).next('ul').slideDown(1000);
                // } else {
                //     // $(this).next('ul').hide(1000);
                //     $(this).next('ul').slideUp(1000);
                // }
                
                // 真正的JQ
                $(this).next('ul').slideToggle(500);
            });
        });



    </script>
</body>
</html>